<template>
<!-- 更改性别 -->
  <div class="container">
    <v-header :title="title"></v-header>

    <div class="content">

      <ul class="mui-table-view mui-table-view-radio">
				<li :class="['mui-table-view-cell', {'mui-selected': userSex=='1'}]">
					<a class="mui-navigate-right">
						男
					</a>
				</li>
				<li :class="['mui-table-view-cell', {'mui-selected': userSex=='2'}]">
					<a class="mui-navigate-right">
						女
					</a>
				</li>
			</ul>

      <div class="mui-button-row">
        <button type="button" class="mui-btn confirm-btn" @click="save">保存</button>
      </div>

    </div>

    <v-mask :show="isShowLoading">
      <loading :msg="loadingMsg"></loading>
    </v-mask>

  </div>
</template>

<script type="text/ecmascript-6">

import VHeader from 'components/v-header'
import VMask from 'components/v-mask'
import Loading from 'components/loading'

import { ERR_OK } from 'api/config.js'
import { UpdateSex } from 'api/user.js'

export default {
  data() {
    return {
      title: '更改性别',
      userSex: '', //男1女2
      isShowLoading: false,
      loadingMsg: '更改性别'
    }
  },
  components: {
    VHeader,
    VMask,
    Loading
  },
  mounted() {
    let userSex = this.$store.state.userInfo.userSex
    this.userSex = userSex ? userSex : '1' 

    let _this = this
    document.querySelector('.mui-table-view.mui-table-view-radio').addEventListener('selected',function(e){
      _this.userSex = e.detail.el.innerText.replace(/\s/g,'') == '男' ? '1' : '2'
      console.log(_this.userSex)
		});
  },
  methods: {
    save: function () {
      this.isShowLoading = true
      UpdateSex({
        userId: this.$store.state.userInfo.userId,
        userSex: this.userSex
      }).then((res) => {
        this.isShowLoading = false
        console.log(res)
        if (res.code == ERR_OK) {
          this.$store.state.userInfo.userSex = res.object.userSex
          mui.toast('更改成功')
          this.$router.goBack()
        } else {
          mui.toast(res.object)
        }
      }).catch(() => {
        this.isShowLoading = false
      })
    }
  }
}
</script>

<style scoped lang="stylus">

@import '../../common/stylus/mixin.styl'
@import '../../common/stylus/variable.styl'

.container
  position fixed
  width 100%
  height 100%
  background-color $color-bg-gray
  .content
    margin-top 20px
    .mui-button-row
      margin 0 20px
      background-color $color-bg-gray
      .confirm-btn
        width 100%
        height 45px
        margin-top 100px
        background-color $color-theme
        color #fff
        font-size $font-size-medium


</style>
